<template>
  <div class="">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 消息通知</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="message">
        <el-tab-pane :label="`未读消息(${unread.length})`" name="first">
          <el-table :data="unread" :show-header="false" style="width: 100%">
            <el-table-column prop="message">
              <template slot-scope="scope">
                <span class="message-title">{{scope.row.message}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="date" width="180"> <template slot-scope="scope"> <span
                  class="message-title">{{scope.row.date}}</span> </template> </el-table-column>
            <el-table-column width="120">
              <template slot-scope="scope">
                <el-button size="small" @click="handleRead(scope.$index, scope.row)">标为已读</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="handle-row">
            <el-button type="primary" @click="handleAllRead()">全部标为已读</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`已读消息(${read.length})`" name="second">
          <template v-if="message === 'second'">
            <el-table :data="read" :show-header="false" style="width: 100%">
              <el-table-column prop="message">
                <template slot-scope="scope">
                  <span class="message-title">{{scope.row.message}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" width="180"><template slot-scope="scope">
                  <span class="message-title">{{scope.row.date}}</span></template></el-table-column>
              <el-table-column width="120">
                <template slot-scope="scope">
                  <el-button @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="handle-row">
              <el-button type="primary" @click="handleAllDelete()">删除全部</el-button>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane :label="`回收站(${recycle.length})`" name="third">
          <template v-if="message === 'third'">
            <el-table :data="recycle" :show-header="false" style="width: 100%">
              <el-table-column prop="message">
                <template slot-scope="scope">
                  <span class="message-title">{{scope.row.message}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" width="180">
                <template slot-scope="scope">
                  <span class="message-title">{{scope.row.date}}</span>
                </template>
              </el-table-column>
              <el-table-column width="120">
                <template slot-scope="scope">
                  <el-button @click="handleRestore(scope.$index, scope.row)">还原</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="handle-row">
              <el-button type="success" @click="handleAllRecycle()">清空回收站</el-button>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    // name: 'tabs',
    mounted() {
      this.getUnReadList(),
        this.getReadList(),
        this.getRecycleList()
    },
    data() {
      return {
        message: 'first',
        showHeader: false,
        unread: [{
          // date: '2018-04-19 20:00:00',
          // title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护',
          // },{
          //     date: '2018-04-19 21:00:00',
          //     title: '今晚12点整发大红包，先到先得',
        }, ],
        read: [{
          // date: '2018-04-19 20:00:00',
          // title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
        }],
        recycle: [{
          // date: '2018-04-19 20:00:00',
          // title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
        }]
      }
    },
    methods: {
      // 显示未读信息列表
      getUnReadList() {
        console.log("unread")
        this.$axios({
          url: 'admin/selUnRead',
          method: 'post',
          headers: {
            "Context-Type": "multipart/form-data"
          },
        }).then(response => {
          console.log(response.data)
          this.unread = response.data
        })
      },
      // 显示已读信息列表
      getReadList() {
        console.log("read")
        this.$axios({
          url: 'admin/selRead',
          method: 'post',
          headers: {
            "Context-Type": "multipart/form-data"
          },
        }).then(response => {
          console.log(response.data)
          this.read = response.data
        })
      },
      // 显示回收站列表
      getRecycleList() {
        console.log("recycle")
        this.$axios({
          url: 'admin/selRecycle',
          method: 'post',
          headers: {
            "Context-Type": "multipart/form-data"
          },
        }).then(response => {
          console.log(response.data)
          this.recycle = response.data
        })
      },
      // 点击已读按钮
      handleRead(index, row) {
        console.log(index, row);
        this.openunread(row)
      },
      // 点击删除按钮
      handleDel(index, row) {
        console.log(index, row);
        this.openread(row)
      },
      // 点击还原按钮
      handleRestore(index, row) {
        console.log(index, row);
        this.openrecycle(row)
      },

      // 删除弹窗
      openread(row) {
        this.$confirm("此操作将删除该消息【" + row.message + "】, 是否继续?", '操作消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.changeRead(row.sysMessageId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 已读弹窗
      openunread(row) {
        this.$confirm("此操作将还原该消息【" + row.message + "】, 是否继续?", '操作消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.changeUnRead(row.sysMessageId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消已读'
          });
        });
      },
      // 回收站弹窗
      openrecycle(row) {
        this.$confirm("此操作将已读该消息【" + row.message + "】, 是否继续?", '操作消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.changeRecycle(row.sysMessageId)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消还原'
          });
        });
      },
      // 修改已读
      changeRead(sysMessageId) {
        this.$axios({
            url: '/admin/changeRead/',
            method: 'post',
            headers: {
              "Content-Type": "multipart/form-data"
            },
            data: {
              sysMessageId: sysMessageId,
            } //传值
          })
          .then(res => {
            console.log('数据接收:', res.data);
            if (res.data == 1) {
              this.$message({
                type: 'success',
                message: '操作已读成功!'
              });
              this.getRecycleList();
              this.getReadList();
            } else {
              this.$message({
                type: 'Danger',
                message: '操作已读失败!'
              });
            }
          });
      },
      // 修改未读
      changeUnRead(sysMessageId) {
        this.$axios({
            url: '/admin/changeUnRead/',
            method: 'post',
            headers: {
              "Content-Type": "multipart/form-data"
            },
            data: {
              sysMessageId: sysMessageId,
            } //传值
          })
          .then(res => {
            console.log('数据接收:', res.data);
            if (res.data == 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getUnReadList();
              this.getReadList();
            } else {
              this.$message({
                type: 'Danger',
                message: '操作失败!'
              });
            }
          });
      },

      // 修改回收站
      changeRecycle(sysMessageId) {
        this.$axios({
            url: '/admin/changeRecycle/',
            method: 'post',
            headers: {
              "Content-Type": "multipart/form-data"
            },
            data: {
              sysMessageId: sysMessageId,
            } //传值
          })
          .then(res => {
            console.log('数据接收:', res.data);
            if (res.data == 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getRecycleList();
              this.getReadList();
            } else {
              this.$message({
                type: 'Danger',
                message: '操作失败!'
              });
            }
          });
      },
      // 全部已读
      handleAllRead() {
        console.log("allRead")
        this.$confirm("此操作将已读所有消息, 是否继续?", '操作消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.$axios({
              url: '/admin/allRead/',
              method: 'post',
              headers: {
                "Content-Type": "multipart/form-data"
              }
            }),
            this.$message({
              type: 'success',
              message: '全部标为已读，操作成功!'
            }),
            this.getUnReadList();
          this.getReadList();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消已读'
          });
        });
      },
      // 全部删除到回收站
      handleAllDelete() {
        console.log("allDelete")
        this.$confirm("此操作将删除所有已读消息, 是否继续?", '操作消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.$axios({
              url: '/admin/allDelete/',
              method: 'post',
              headers: {
                "Content-Type": "multipart/form-data"
              }
            }),
            this.$message({
              type: 'success',
              message: '全部删除到回收站，操作成功!'
            }),
            this.getReadList();
          this.getRecycleList();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 全部删除到回收站
      handleAllRecycle() {
        console.log("allRecycle")
        this.$confirm("此操作将还原所有回收站消息, 是否继续?", '操作消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.$axios({
              url: '/admin/allRecycle/',
              method: 'post',
              headers: {
                "Content-Type": "multipart/form-data"
              }
            }),
            this.$message({
              type: 'success',
              message: '全部还原到已读列表，操作成功!'
            }),
            this.getReadList();
          this.getRecycleList();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消全部还原'
          });
        });
      },
    },
    computed: {
      unreadNum() {
        return this.unread.length;
      }
    }
  }
</script>

<style>
  .message-title {
    cursor: pointer;
  }

  .handle-row {
    margin-top: 30px;
  }
</style>
